<template>
  <div class="kill-comparison">
    <div class="kill-bars-container">
      <div class="kill-bars">
        <div class="blue-bar" :style="{ width: bluePercentage + '%' }">{{ blueKills }}</div>
        <div class="red-bar" :style="{ width: redPercentage + '%' }">{{ redKills }}</div>
        <div class="total-label">Total Kills</div>
      </div>
      <div class="kill-bars">
        <div class="blue-bar" :style="{ width: bluegoldPercentage + '%' }">{{ formattedBlueGold }}</div>
        <div class="red-bar" :style="{ width: redgoldPercentage + '%' }">{{ formattedRedGold }}</div>
        <div class="total-label">Total Gold</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    blueKills: { type: Number, default: 0 },
    redKills: { type: Number, default: 0 },
    bluegold: { type: Number, default: 0 },
    redgold: { type: Number, default: 0 },
    matchTime: { type: Number, default: 0 }
  },
  computed: {
    bluePercentage() {
      const total = this.blueKills + this.redKills;
      return total > 0 ? (this.blueKills / total) * 100 : 50;
    },
    redPercentage() {
      return 100 - this.bluePercentage;
    },
    bluegoldPercentage() {
      const total1 = this.bluegold + this.redgold;
      return total1 > 0 ? (this.bluegold / total1) * 100 : 50;
    },
    redgoldPercentage() {
      return 100 - this.bluegoldPercentage;
    },
    formattedBlueGold() {
      return this.bluegold.toLocaleString();
    },
    formattedRedGold() {
      return this.redgold.toLocaleString();
    }
  }
}
</script>

<style scoped>
.kill-comparison {
  height: 80%;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 12px;
  color: white;
}

.kill-bars-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 4px;
}

.kill-bars {
  height: 30%;
  display: flex;
  position: relative;
}

.blue-bar {
  background: rgb(83,131,232);
  transition: width 0.5s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  font-weight: 450;
  font-size: 11px;
  color: white;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  min-width: 20px;
}

.red-bar {
  background: rgb(232,64,87);
  transition: width 0.5s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-weight: 450;
  font-size: 11px;
  color: white;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  min-width: 20px;
}
.total-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}
/* 响应式调整 */
@media (max-height: 600px) {
  .kill-bars {
    height: 46%;
  }
  .total-label {
    font-size: 9px;
  }
}

/* 当数据为0时的特殊样式 */
.blue-bar[style*="width: 50%"]:not(:has(+ .red-bar[style*="width: 50%"])) {
  opacity: 0.7;
}
.red-bar[style*="width: 50%"]:not(.blue-bar[style*="width: 50%"] + *) {
  opacity: 0.7;
}
</style>